<template>
  <div class="menu-wrapper">
    <menuCCoffee :data-menu="dataMenu" @mouse-enter="onMouseEnter" @mouse-leave="onMouseLeave" />
    <menu-c-pop :selected-item="selectedItem" :is-show="isShow" @mouse-enter="onEnter" @mouse-leave="onLeave" />
  </div>
</template>

<script>
import dataMenu from 'assets/data/data-index-home-menu'
import menuC from './com/menu-c/menu-c'
import menuCCoffee from './com/menu-c/menu-c-coffee'
import menuCPop from './com/menu-c/menu-c-popup'
import menuCMixin from './com/menu-c/menu-c-mixin'
export default {
  components: {
    menuC,
    menuCPop,
    menuCCoffee
  },
  mixins: [menuCMixin],
  data() {
    return {
      dataMenu: dataMenu.menuData
    }
  }
}
</script>

<style lang="stylus">
// TODO: 菜单弹出有问题,不能自适应宽度
.menu-wrapper
  z-index 50
  position absolute
  left 0
  top 0
  height 100%
  // width 100%
  display flex
</style>
